<div class="card border-dark">
    <div class="card-header">Read status</div>
    <form [formGroup]="readStatusForm" (ngSubmit)="updateData()">
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">Read status</span>
            </div>
            <select id="readStatus" formControlName="ReadStatus" class="form-control">
                <option></option>
                <option class="read">Read</option>
                <option class="reading">Reading</option>
                <option class="toread">To read</option>
                <option class="notgoingtoread">Not going to read</option>
            </select>
        </div>

        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">Read remark</span>
            </div>
            <textarea id="readRemark" formControlName="ReadRemark" class="form-control"></textarea>
        </div>
        
        <div class="card-footer text-muted">
            <button class="btn btn-info" (click)="updateData()" type="button">Update read status</button>
        </div>
    </form>
</div>